<script>
export default {
  name: "textareGap",
  data() {
    return {
      textValue: ''
    }
  },
  props: {
    margin: {
      type: String,
      default: '0 0 0 0'
    },
    title: {
      type: String,
      default: '备注'
    },
    placeholder: {
      type: String,
      default: '请输入备注(500字以内)'
    },
    color: {
      type: String,
      default: '#4B4B4B'
    },
    maxlength: {
      type: Number,
      default: 500
    },
    value:{
      type: String,
      default: ''
    }
  },
  watch:{
    value:{
      deep:true,
      handler(newValue, oldValue) {
        this.textValue = newValue
      }
    }
  },
  methods: {
    save() {
      this.$emit('save', this.textValue)
    }
  },
}
</script>

<template>
  <view class="textareGap" :style="{
    margin: margin
  }">
    <view class="textareGap_top">
      <text class="textareGap_top_text">{{ title }}</text>
    </view>
    <view class="textareGap_center mt-10">
      <textarea class="textareGap_center_textarea" v-model="textValue" :maxlength="maxlength" :placeholder="placeholder"
                placeholder-class="textarePlaceholder" auto-height></textarea>
    </view>
    <view class="textareGap_bottom row items-center justify-end mt-26">
      <view class="textareGap_bottom_btn allRowCenter" @click="save">
        <text class="textareGap_bottom_btn_text">保存</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.textareGap {
  width: 702rpx;
  padding: 19rpx 18rpx;
  background: #FFFFFF;
  border-radius: 15rpx 15rpx 15rpx 15rpx;

  .textareGap_top {
    width: 666rpx;

    .textareGap_top_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #4B4B4B;
    }
  }

  .textareGap_center {
    width: 666rpx;
    border-radius: 17rpx 17rpx 17rpx 17rpx;
    overflow: hidden;
    background: #EDEDED;

    .textareGap_center_textarea {
      margin: 18rpx 24rpx;
      width: 636rpx;
      min-height: 290rpx;
    }

    /deep/ .textarePlaceholder {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #4B4B4B;
    }
  }

  .textareGap_bottom {
    width: 666rpx;

    .textareGap_bottom_btn {
      width: 133rpx;
      height: 48rpx;
      background: #FF4206;
      border-radius: 41rpx 41rpx 41rpx 41rpx;

      .textareGap_bottom_btn_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #FFFFFF;
      }
    }
  }
}
</style>